<template>
  <div class="app-container2 gzspz_wrap">
    <div class="left_box">
      <commonTree2 />
    </div>
    <div class="right_box">
      <div class="right_main">
        <div class="right_top_btns">
          <el-button class="js_common_btn">加载设备故障树</el-button>
          <el-button class="js_common_btn" @click="onShowTreeDialogFn(true)"
            >故障树预览</el-button
          >
        </div>
        <div class="right_table1_wrap">
          <el-table
            border
            class="jk_common_table003"
            :data="tableData1"
            height="style"
            style="width: 100%; height: 100%"
          >
            <el-table-column
              type="selection"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column label="序号" align="center" width="120">
              <template slot-scope="scop">
                {{ scop.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="sbName"
              label="设备类型"
              align="center"
              width="160"
            ></el-table-column>
            <el-table-column
              prop="treeName"
              label="故障树名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="treeId"
              label="故障树编号"
              align="center"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="treeDesc"
              label="故障树描述"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="treeNum"
              label="故障树底事件个数"
              align="center"
              width="160"
            ></el-table-column>
          </el-table>
        </div>
        <div class="right_btm_btns">
          <el-button class="js_common_btn">故障树测点配置</el-button>
          <div class="right_btm_btns_item">
            <!-- <el-button class="js_common_btn">故障树预览</el-button>
            <el-button class="js_common_btn">故障树预览</el-button> -->
          </div>
        </div>
        <div class="right_table2_wrap">
          <div class="table2_main">
            <el-table
              border
              class="jk_common_table003"
              :data="tableData2"
              height="style"
              style="width: 100%; height: 100%"
              row-key="id"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column label="序号" align="center" width="120">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="thingName"
                label="事件名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="thingId"
                label="事件编号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="thingDesc"
                label="事件描述"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="thingType"
                label="事件类型"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="thingCengci"
                label="事件层次"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="beizhu"
                label="备注"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
          <div class="table2_fenye">
            <el-pagination
              class="js_common_fenyeqi"
              :current-page="1"
              :page-size="10"
              :pager-count="5"
              :append-to-body="false"
              popper-class="js_common_fenyeqi_popper"
              layout="prev, pager, next, sizes, jumper"
              :total="400"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="模块信息"
      :visible.sync="treeDialogFlag"
      width="80%"
      custom-class="jk_common_dialog000"
    >
      <span slot="title" class="dialog_header_wrap">故障树预览</span>
      <div class="tree_wrap">
        <treeBox :treeChartData="treeChartData" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import commonTree2 from "../../../components/commonTree2";
import treeBox from "./components/treeBox.vue";
import * as echarts from "echarts";
export default {
  components: { commonTree2, treeBox },
  data() {
    return {
      treeDialogFlag: false,
      treeChartData: [
        {
          name: "本控制站(控制器软件)发生不可接受故障",
          relationType: 0,
          label: {
            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "#CDDBEC" },
              { offset: 0.02, color: "#CDDBEC" },
              { offset: 0.02, color: "#0649A1" },
              { offset: 1, color: "#0649A1" },
            ]), // 文字块的背景颜色
          },
          children: [
            {
              name: "一层控制站处理功能故障",
              label: {
                backgroundColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#2C8F45" },
                    { offset: 0.02, color: "#2C8F45" },
                    { offset: 0.02, color: "#0C4553" },
                    { offset: 1, color: "#0C4553" },
                  ]
                ), // 文字块的背景颜色
              },
              children: [
                {
                  name: "主备控制器A、B同时故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#2C8F45" },
                        { offset: 0.02, color: "#2C8F45" },
                        { offset: 0.02, color: "#0C4553" },
                        { offset: 1, color: "#0C4553" },
                      ]
                    ), // 文字块的背景颜色
                  },
                  children: [
                    {
                      name: "双路电源均故障",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "配置管理故障",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "程序运行故障",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#2C8F45" },
                            { offset: 0.02, color: "#2C8F45" },
                            { offset: 0.02, color: "#0C4553" },
                            { offset: 1, color: "#0C4553" },
                          ]
                        ), // 文字块的背景颜色
                      },
                      children: [
                        {
                          name: "程序运行故障",
                          label: {
                            backgroundColor: new echarts.graphic.LinearGradient(
                              0,
                              0,
                              1,
                              0,
                              [
                                { offset: 0, color: "#6E82A3" },
                                { offset: 0.02, color: "#6E82A3" },
                                { offset: 0.02, color: "#0B2D5D" },
                                { offset: 1, color: "#0B2D5D" },
                              ]
                            ), // 文字块的背景颜色
                          },
                        },
                        {
                          name: "逻辑未运行",
                          label: {
                            backgroundColor: new echarts.graphic.LinearGradient(
                              0,
                              0,
                              1,
                              0,
                              [
                                { offset: 0, color: "#6E82A3" },
                                { offset: 0.02, color: "#6E82A3" },
                                { offset: 0.02, color: "#0B2D5D" },
                                { offset: 1, color: "#0B2D5D" },
                              ]
                            ), // 文字块的背景颜色
                          },
                        },
                        {
                          name: "程序执行异常",
                          label: {
                            backgroundColor: new echarts.graphic.LinearGradient(
                              0,
                              0,
                              1,
                              0,
                              [
                                { offset: 0, color: "#6E82A3" },
                                { offset: 0.02, color: "#6E82A3" },
                                { offset: 0.02, color: "#0B2D5D" },
                                { offset: 1, color: "#0B2D5D" },
                              ]
                            ), // 文字块的背景颜色
                          },
                        },
                      ],
                    },
                    {
                      name: "网络风暴故障",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                  ],
                },
                {
                  name: "主备控制器A、B冗余功能故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#2C8F45" },
                        { offset: 0.02, color: "#2C8F45" },
                        { offset: 0.02, color: "#0C4553" },
                        { offset: 1, color: "#0C4553" },
                      ]
                    ), // 文字块的背景颜色
                  },
                  children: [
                    {
                      name: "组态工程缺失",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器操作系统不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器驱动程序不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器应用程序不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器组态数据比对不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器FPGA程序不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                  ],
                },
              ],
            },
            {
              name: "本控制站内通信功能故障",
              label: {
                backgroundColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#2C8F45" },
                    { offset: 0.02, color: "#2C8F45" },
                    { offset: 0.02, color: "#0C4553" },
                    { offset: 1, color: "#0C4553" },
                  ]
                ), // 文字块的背景颜色
              },
              children: [
                {
                  name: "同步网(第三以太网)通信故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
                {
                  name: "总线AB双路通信状态故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
              ],
            },
            {
              name: "本控制站与外部通讯故障",
              label: {
                backgroundColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#2C8F45" },
                    { offset: 0.02, color: "#2C8F45" },
                    { offset: 0.02, color: "#0C4553" },
                    { offset: 1, color: "#0C4553" },
                  ]
                ), // 文字块的背景颜色
              },
              children: [
                {
                  name: "AB双网故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
              ],
            },
            {
              name: "时钟故障",
              label: {
                backgroundColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#2C8F45" },
                    { offset: 0.02, color: "#2C8F45" },
                    { offset: 0.02, color: "#0C4553" },
                    { offset: 1, color: "#0C4553" },
                  ]
                ), // 文字块的背景颜色
              },
              children: [
                {
                  name: "B码通道PPS状态异常",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
                {
                  name: "B码通道码状态异常",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
                {
                  name: "B码双通道故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
              ],
            },
          ],
        },
      ],
      tableData1: [
        {
          id: "000001",
          sbName: "通讯服务器",
          treeName: "通讯服务01-CS-A失效",
          treeId: "2",
          treeDesc: "N2000通讯服务器失效故障诊断树",
          treeNum: "12",
        },
        {
          id: "000002",
          sbName: "通讯服务器",
          treeName: "通讯服务01-CS-B失效",
          treeId: "3",
          treeDesc: "N2000通讯服务器失效故障诊断树",
          treeNum: "12",
        },
        {
          id: "000003",
          sbName: "通讯服务器",
          treeName: "通讯服务01-CS-C失效",
          treeId: "4",
          treeDesc: "N2000通讯服务器失效故障诊断树",
          treeNum: "13",
        },
        {
          id: "000004",
          sbName: "通讯服务器",
          treeName: "通讯服务01-CS-D失效",
          treeId: "5",
          treeDesc: "N2000通讯服务器失效故障诊断树",
          treeNum: "13",
        },
        {
          id: "000001",
          sbName: "通讯服务器",
          treeName: "通讯服务01-CS-A失效",
          treeId: "6",
          treeDesc: "N2000通讯服务器失效故障诊断树",
          treeNum: "15",
        },
        {
          id: "000001",
          sbName: "通讯服务器",
          treeName: "通讯服务01-CS-B失效",
          treeId: "37",
          treeDesc: "N2000通讯服务器失效故障诊断树",
          treeNum: "16",
        },
      ],
      tableData2: [
        {
          id: "001",
          thingName: "操作员站-OWP-01故障",
          thingId: "5",
          thingDesc: "操作员站-OWP-01故障",
          thingType: "顶事件",
          thingCengci: "5",
          beizhu: "5",
          children: [
            {
              id: "001-1",
              thingName: "硬件故障",
              thingId: "44",
              thingDesc: "硬件故障",
              thingType: "中间事件",
              thingCengci: "44",
              beizhu: "44",
              children: [
                {
                  id: "001-1-1",
                  thingName: "事件--2",
                  thingId: "46",
                  thingDesc: "事件--2",
                  thingType: "中间事件",
                  thingCengci: "46",
                  beizhu: "46",
                  children: [
                    {
                      id: "001-1-1-1",
                      thingName: "事件--11",
                      thingId: "72",
                      thingDesc: "事件--11",
                      thingType: "中间事件",
                      thingCengci: "46",
                      beizhu: "46",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: "002",
          thingName: "操作员站-OWP-01故障",
          thingId: "5",
          thingDesc: "操作员站-OWP-01故障",
          thingType: "顶事件",
          thingCengci: "5",
          beizhu: "5",
          children: [
            {
              id: "002-1",
              thingName: "硬件故障",
              thingId: "44",
              thingDesc: "硬件故障",
              thingType: "中间事件",
              thingCengci: "44",
              beizhu: "44",
              children: [
                {
                  id: "002-1-1",
                  thingName: "事件--2",
                  thingId: "46",
                  thingDesc: "事件--2",
                  thingType: "中间事件",
                  thingCengci: "46",
                  beizhu: "46",
                  children: [
                    {
                      id: "002-1-1-1",
                      thingName: "事件--11",
                      thingId: "72",
                      thingDesc: "事件--11",
                      thingType: "中间事件",
                      thingCengci: "46",
                      beizhu: "46",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    onShowTreeDialogFn(flag) {
      this.treeDialogFlag = flag;
    },
  },
};
</script>
<style lang="scss" scoped>
$modelCreatebgColor: #0e2141;
.gzspz_wrap {
  width: 100%;
  display: flex;
  .left_box {
    flex: 0 0 auto;
  }
  .right_box {
    margin-left: 20px;
    width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    .right_main {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px 0;
      border: 1px solid #234067;
      background: linear-gradient(to bottom, #0c1d3a, #163368);
      display: flex;
      flex-direction: column;
      .right_top_btns {
        flex: 0 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        box-sizing: border-box;
        padding: 0 20px;
      }
      .right_btm_btns {
        flex: 0 0 auto;
        display: flex;
        justify-content: space-between;
        margin: 16px 0;
        padding: 0 20px;
      }
      .right_table1_wrap,
      .right_table2_wrap {
        flex: 1 1 auto;
        height: 0;
        display: flex;
        flex-direction: column;
        .table2_main {
          flex: 1 1 auto;
          width: 100%;
          height: 0;
        }
        .table2_fenye {
          flex: 0 0 auto;
          margin-top: 16px;
          box-sizing: border-box;
          padding: 0 20px;
        }
      }
    }
  }
}
::v-deep .jk_common_dialog000 {
  .el-dialog__header {
    width: 100%;
    height: 60px;
    background: url("../../../assets/images/dialog000_bg_title.png") center
      center no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .dialog_header_wrap {
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      color: #fff;
      padding-bottom: 14px;
      text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
    }
  }
  .el-dialog__body {
    .tree_wrap {
      width: 100%;
      height: 540px;
    }
  }
}
</style>
